import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { DomSanitizer } from '@angular/platform-browser';
import { ModelListService } from '../../../../services/project/model/model-list.service';
import { projectInfo } from '../../survey/survey.model';
import { CDNFILEURL } from './../../../../config';

@Component({
  selector: 'app-view',
  templateUrl: './view.component.html',
  styleUrls: ['./view.component.scss']
})
export class ViewComponent implements OnInit {
  protected projectId: any;
  constructor(
    private routeInfo: ActivatedRoute,
    private router: Router,
    private sanitizer: DomSanitizer,
    private modelListService: ModelListService,
  ) { }

  public imgStyle: any = {};
  public leftBench: any;
  public project: any = JSON.parse(window.localStorage.getItem('project'));
  public drawings = window.localStorage.getItem('drawings') ? JSON.parse(window.localStorage.getItem('drawings')) : '';
  // 工具栏样式
  public gumToolBar = {
    style: {
      position: 'absolute',
      top: 'calc(100% - 80px)',
      buttom: '40px',
      left: '50%',
      transform: 'translateX(-50%)',
      zIndex: '10000'
    }
  }
  // 渲染图纸
  public async showDrawings() {
    let resLinkS = await this.modelListService.modelRelation(this.drawings.modelGroupId);
    console.log(JSON.parse(resLinkS.item))
    const resLink = JSON.parse(resLinkS.item);

    // 处理矩阵
    let modelMatrix = await this.applyMatrix(resLink)
    // 创建容器*****************
    const left: HTMLDivElement = document.getElementById('ModelContainer') as HTMLDivElement;
    this.leftBench = gum.Scott.create({
      'container': left,
      'projectId': this.project.id,
      dock: 4,
      'system': gum.SystemType.ST_2D
    });
    gum.Scott.run(this.leftBench);
    gum.Apis.getApi(this.leftBench).UI.enableToolBars(false);
    const path = this.drawings.path.split('.')[0];
    gum.Scott.load(this.leftBench, {
      url: CDNFILEURL + '/' + path + '/',
      workerUrl: '../../../../../assets/js/',
      orgModelId: resLink[0].OrgModelId,
      newModelId: resLink[0].NewModelId,
      modelMatrix: modelMatrix[0].Matrix
    });
  }

  // 逆乘矩阵队列
  applyMatrix(nodes) {
    let nodeQueue = [];
    nodes.forEach(node => {
      if (node.Matrix instanceof Array) {
        node.Matrix = new gum.Matrix43D().fromArray(node.Matrix);
      }
    });
    nodeQueue.push.apply(nodeQueue, nodes);
    while (nodeQueue.length) {
      let node = nodeQueue.shift();
      if (node.Children && node.Children.length > 0) {
        node.Children.forEach(cn => {
          if (cn.Matrix instanceof Array) {
            cn.Matrix = new gum.Matrix43D().fromArray(cn.Matrix).premultiply(node.Matrix as gum.Matrix43D);
          } else if (!(cn.Matrix instanceof gum.Matrix43D)) {
            cn.Matrix = new gum.Matrix43D;
          }
          nodeQueue.push(cn);
        });
      }
    }
    return nodes;
  }


  toolbarEvent(e) {
    console.log(e)
  }
  public routerTo() {
    this.routeInfo.queryParams.subscribe(queryParams => {
      const projectId = JSON.parse(window.localStorage.getItem('project')).id;
      this.router.navigate([`inner/project/${projectId}/drawings`], { queryParams });
    });
  }
  ngOnInit() {
    this.showDrawings();
  }

}
